---
title: Docusaurus에서 마이그레이션
description: 기존 Docusaurus 프로젝트를 Astro로 마이그레이션하기 위한 팁
sidebar:
  label: Docusaurus
type: migration
stub: true
framework: Docusaurus
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import { CardGrid, LinkCard } from '@astrojs/starlight/components';

[Docusaurus](https://Docusaurus.io)는 React를 기반으로 구축된 인기 있는 문서 웹사이트 빌더입니다.

## Docusaurus와 Astro의 주요 유사점

Docusaurus와 Astro는 프로젝트 마이그레이션에 도움이 되는 몇 가지 유사점을 공유합니다.

- Astro와 Docusaurus는 모두 문서 사이트와 같은 [콘텐츠 중심 웹사이트](/ko/concepts/why-astro/#콘텐츠-중심)를 위한 현대적인 JavaScript 기반 (Jamstack) 사이트 빌더입니다.

- Astro와 Docusaurus 모두 [MDX 페이지](/ko/guides/markdown-content/)를 지원합니다. Astro에 기존 `.mdx` 파일을 사용할 수 있어야 합니다.

- Astro와 Docusaurus는 모두 [파일 기반 라우팅](/ko/guides/routing/)을 사용하여 `src/pages` 디렉터리에 있는 모든 MDX 파일에 대한 페이지 경로를 자동으로 생성합니다. 기존 콘텐츠에 Astro의 파일 구조를 사용하고 새 페이지를 추가하는 것이 친숙하게 느껴질 것입니다.

- Astro에는 [React 컴포넌트 사용을 위한 공식 통합](/ko/guides/integrations-guide/react/)이 있습니다. Astro에서 React 파일은 `.jsx` 또는 `.tsx` 확장자를 **반드시** 가져야 합니다.

- Astro는 React용 패키지를 포함하여 [NPM 패키지 설치](/ko/guides/imports/#npm-패키지)를 지원합니다. 기존 React 컴포넌트 및 종속성의 일부 또는 전부를 유지할 수 있습니다.

- React 작성에 익숙하다면 [Astro의 JSX 유사 구문](/ko/basics/astro-components/#컴포넌트-템플릿)이 익숙하게 느껴질 것입니다.

## Docusaurus와 Astro의 주요 차이점

Astro에서 Docusaurus 사이트를 다시 구축하면 몇 가지 중요한 차이점을 발견할 수 있습니다.

- Docusaurus는 React 기반 단일 페이지 애플리케이션 (SPA)입니다. Astro 사이트는 [`.astro` 컴포넌트](/ko/basics/astro-components/)를 사용하여 구축된 다중 페이지 앱이지만 [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS](/ko/guides/framework-components/) 및 원시 HTML 템플릿도 지원할 수 있습니다.

- Docusaurus는 문서 웹 사이트를 구축하도록 설계되었으며 Astro에서 직접 구축해야 하는 문서 관련 웹 사이트 기능이 내장되어 있습니다. 대신 Astro는 [Starlight: 공식 문서 테마](https://starlight.astro.build/ko)를 통해 이러한 기능 중 일부를 제공합니다. 이 웹사이트는 Starlight에 대한 영감을 주었으며, 현재 사이트에 사용되고 있습니다! 테마 쇼케이스에서 기본 제공 기능이 포함된 더 많은 [커뮤니티 문서 테마](https://astro.build/themes?search=&categories%5B%5D=docs)를 찾을 수도 있습니다.

- Docusaurus 사이트는 콘텐츠에 MDX 페이지를 사용합니다. Astro의 문서 테마는 기본적으로 Markdown (`.md`) 파일을 사용하며 MDX를 사용할 필요가 없습니다. 선택적으로 [Astro의 MDX 통합을 설치](/ko/guides/integrations-guide/mdx/) (기본적으로 Starlight 테마에 포함됨) 하고 표준 Markdown 파일 외에도 `.mdx` 파일을 사용할 수 있습니다.

## Docusaurus에서 Astro로 전환

Docusaurus 문서 사이트를 Astro로 변환하려면 공식 [Starlight 문서 테마 시작 템플릿](https://starlight.astro.build/ko)으로 시작하거나 [테마 쇼케이스](https://astro.build/themes?search=&categories%5B%5D=docs)에서 더 많은 커뮤니티 문서 테마를 탐색하세요.

`create astro` 명령에 `--template` 인수를 전달하여 공식 스타터 중 하나를 사용하여 새 Astro 프로젝트를 시작할 수 있습니다. 또는 [GitHub의 기존 Astro 저장소에서 새 프로젝트를 시작](/ko/install-and-setup/#cli-마법사로-설치)할 수 있습니다.

  <PackageManagerTabs>
    <Fragment slot="npm">
    ```shell
    npm create astro@latest -- --template starlight
    ```
    </Fragment>
    <Fragment slot="pnpm">
    ```shell
    pnpm create astro@latest --template starlight
    ```
    </Fragment>
    <Fragment slot="yarn">
    ```shell
    yarn create astro --template starlight
    ```
    </Fragment>
  </PackageManagerTabs>

Astro의 MDX 통합은 기본적으로 포함되어 있으므로 즉시 [기존 콘텐츠 파일을 Starlight로 가져올](https://starlight.astro.build/ko/getting-started/#%EC%BD%98%ED%85%90%EC%B8%A0-%EC%B6%94%EA%B0%80) 수 있습니다.

[astro.new](https://astro.new)에서 Astro의 문서 시작 및 기타 공식 템플릿을 찾을 수 있습니다. 각 프로젝트의 GitHub 저장소에 대한 링크는 물론 StackBlitz, CodeSandbox 및 Gitpod 온라인 개발 환경에서 작업 중인 프로젝트를 열 수 있는 원클릭 링크도 찾을 수 있습니다.

## 커뮤니티 리소스

<CardGrid>

  <LinkCard title="문서 작업 속도를 10배 향상시키기 (러시아어)" href="https://habr.com/ru/articles/880220/"/>

</CardGrid>

:::note[공유할 리소스가 있나요?]
Docusaurus 사이트에서 Astro로 전환하는 방법에 대한 유용한 비디오나 블로그 게시물을 찾았거나 직접 만들었다면, [이 목록](https://github.com/withastro/docs/edit/main/src/content/docs/en/guides/migrate-to-astro/from-docusaurus.mdx)에 추가해 주세요!
:::
